<template>
  <div>
    <el-button type="success" plain @click="workAddOpen">新增</el-button>
    <el-row>
      <el-col :span="4">
        <el-input v-model="queryForm.workId" placeholder="请输入作品id" ></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="queryForm.workName" placeholder="请输入作品名称" ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button  plain @click="queryData">查询</el-button>
      </el-col>
    </el-row>




    <el-table :data="workListAll" >
      <el-table-column align="center"  prop="workId" label="作品序号"></el-table-column>
      <el-table-column align="center" prop="workName" label="作品名称"></el-table-column>
      <el-table-column align="center"  prop="introduction" label="作品介绍"></el-table-column>
      <el-table-column align="center"  prop="state" label="作品状态">
        <template v-slot="scope">
          <el-tag type="info" v-if="scope.row.state === 0">待提交</el-tag>
          <el-tag             v-if="scope.row.state === 1">已提交</el-tag>
          <el-tag type="success" v-if="scope.row.state === 2">已通过</el-tag>
          <el-tag type="danger" v-if="scope.row.state === 3">已驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
      <el-table-column align="center"  prop="workCategoryId" label="类别id"></el-table-column>
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
            <el-button type="primary" plain @click="workEditOpen(scope.row)" >修改</el-button>
          <el-button type="danger" plain @click="workDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog
      title="新增作品"
      :visible.sync="workAddVisible"
      width="30%">

      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="作品名称" prop="workName">
          <el-input v-model="form.workName"></el-input>
        </el-form-item>

        <el-form-item label="作品介绍" prop="introduction">
          <el-input v-model="form.introduction"></el-input>
        </el-form-item>

        <el-form-item label="类别id" prop="workCategoryId">
          <el-input v-model="form.workCategoryId"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="workAddVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitAddWork">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="修改作品"
      :visible.sync="workEditVisible"
      width="30%">

      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="作品名称" prop="workName">
          <el-input v-model="form.workName"></el-input>
        </el-form-item>

        <el-form-item label="作品介绍" prop="introduction">
          <el-input v-model="form.introduction"></el-input>
        </el-form-item>

        <el-form-item label="类别id" prop="workCategoryId">
          <el-input v-model="form.workCategoryId"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="workEditVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitEditWork">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>
<script>

import {selectAll,addWork,editWork,deleteWork,selectData} from "../../api/system/work";
import dayjs from 'dayjs';


export default {
  name: "Work",

  data() {
      return{
        workListAll:[],
        workAddVisible:false,
        workEditVisible:false,
        form:{
          workId:null,
          workName:null,
          introduction:null,
          state:0,
          createTime:null,
          workCategoryId:null
        },
        queryForm:{
          workId:null,
          workName:null,
          introduction:null,
          state:0,
          createTime:null,
          workCategoryId:null
        },


        rules: {
          workName: [
            { required: true, message: '请输入作品名称', trigger: 'blur' },
          ],
          introduction: [
            { required: true, message: '请输入作品介绍', trigger: 'blur' }
          ],
          workCategoryId: [
            { required: true, message: '请输入作品类别id', trigger: 'blur' }
          ]
        },






    }
    },
  created(){
    this.getAll();
  },
  methods:{
        //查询所有数据
        getAll(){
          selectAll().then(res=>{
            console.log(res);
            this.workListAll = res.data;
          })
        },
        //打开数据模态框
        workAddOpen(){
          this.reset();
          this.workAddVisible=true;

        },
        //提交作品
        submitAddWork(){
          //表单验证
          this.$refs["form"].validate(valid => {
            if (valid) {

              this.form.createTime =this.getNowTime();
              console.log(this.form.createTime);
              console.log(this.form);
              addWork(this.form).then(res=>{
                if (res.data === 1){
                 this.$message({
                   message: '提交成功',
                   type: 'success'
                 })
                }
                else {
                  this.$message({
                    message: '提交失败',
                    type: 'error'
                  })
                }
                console.log(res);
                this.workAddVisible=false;
                this.getAll();
              })
            }
          })




        },
        //打开修改数据模态框
        workEditOpen(row){
          this.workEditVisible=true;
          this.form = JSON.parse(JSON.stringify(row))
        },
        //修改作品
    submitEditWork() {
      // 1. 触发表单验证：valid 为 true 表示验证通过
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 2. 验证通过：调用修改接口
          editWork(this.form).then(res => {
            // 3. 接口返回后，判断成功/失败
            if (res.data === 1) {
              this.$message({ message: '修改成功', type: 'success' });
              // 成功后关闭弹窗、重置表单、刷新列表
              this.workEditVisible = false;
              this.reset();
              this.getAll();
            } else {
              // 接口返回失败（如数据不存在）
              this.$message({ message: '修改失败', type: 'error' });
            }
            console.log(res);
          }).catch(() => {
            // 4. 接口异常处理（网络错误、后端报错）
            this.$message.error('修改失败，请检查网络或联系管理员');
          });
        } else {
          // 5. 表单验证失败（如未填作品名称）：仅提示，不执行接口
          this.$message.warning('请完善必填项后再提交');
        }
      });
    },

        reset(){
          this.form = {
            workId:null,
            workName:null,
            introduction:null,
            state:0,
            createTime:null,
            workCategoryId:null
          }
        },
        //删除作品
        workDelete(row){
          this.$confirm('是否要删除作品？[ '+row.workName+' ]','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteWork(row.workId).then(res => {
              if (res.data === 1) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                }
                )
                this.getAll();
                console.log(res);

              } else {
                this.$message({
                  message: '删除失败',
                  type: 'error'
                })
                this.getAll();
              }
              console.log(res);

            })


          })
        },
        query(){
          this.getAll();
        },
        //通过输入框查询数据
         queryData(){
          selectData(this.queryForm).then(res =>{
            this.workListAll = res.data;
          })

         },

        getNowTime(format = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs().format(format);
     },

        }


}
</script>
